<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#2e3436" />
    <title>Difftastic, a structural diff</title>
    <meta
      name="description"
      content="Difftastic, a structural diff tool that understands syntax"
    />

    <meta
      property="og:title"
      content="Difftastic, a structural diff tool that understands syntax"
    />
    <meta property="og:url" content="https://difftastic.wilfred.me.uk/" />
    <meta property="og:image" content="" />

    <link rel="icon" href="/favicon.ico" sizes="any" />

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" type="text/css" href="home_static/style.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="home_static/asciinema-player.css"
    />
  </head>

  <body>
    <div class="px-4 pt-5 text-center">
      <h1 class="display-2">
        <span class="red">diff</span><span class="green">tastic</span>
      </h1>

      <div class="col-lg-6 mx-auto">
        <h2 class="fs-4 lead">
          a structural diff tool that understands syntax
        </h2>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-3">
          <a
            class="btn btn-lg btn-light"
            href="https://github.com/Wilfred/difftastic"
            role="button"
            ><object
              class="github-logo"
              data="home_img/github.svg"
              type="image/svg+xml"
            ></object>
            GitHub</a
          >
          <a
            class="btn btn-lg btn-light"
            href="https://difftastic.wilfred.me.uk/introduction.html"
            role="button"
            >📖 Manual</a
          >
          <a
            class="btn btn-lg btn-light"
            href="https://difftastic.wilfred.me.uk/installation.html"
            role="button"
            >🚦 Install</a
          >
        </div>
      </div>
    </div>

    <div class="container-sm px-0">
      <p class="my-5 px-4">
        Difftastic is a CLI diff tool that compares files based on their syntax,
        not line-by-line. Difftastic produces accurate diffs that are easier for
        humans to read.
      </p>

      <div class="card-set">
        <div class="card px-2 pt-2">
          <div class="card-body">
            <h2>
              <span class="green">Understand</span>
              What Actually Changed
            </h2>

            <div class="img-wrapper mb-4">
              <img src="home_img/add_wrap.png" alt="screenshot" />
            </div>
            <p>
              Difftastic parses your code with
              <a href="https://tree-sitter.github.io/tree-sitter/"
                >tree-sitter</a
              >. Unlike a line-oriented text diff, difftastic understands that
              the inner expression hasn't changed here.
            </p>
          </div>
        </div>

        <div class="card px-2 pt-2">
          <div class="card-body">
            <h2><span class="green">Ignore</span> Formatting Changes</h2>

            <div class="img-wrapper mb-4">
              <img src="home_img/reformat.png" alt="screenshot" />
            </div>
            <p>
              Has your code formatter decided to split something over multiple
              lines? Difftastic can show what has actually changed.
            </p>
          </div>
        </div>

        <div class="card px-2 pt-2">
          <div class="card-body">
            <h2><span class="green">Visualise</span> Wrapping Changes</h2>

            <div class="img-wrapper mb-4">
              <img src="home_img/wrap_struct.png" alt="screenshot" />
            </div>
            <p>
              Have you added a wrapper? Difftastic can match the delimiters
              exactly.
            </p>

            <div class="img-wrapper mb-4">
              <img
                src="home_img/change_wrap.png"
                class="mb-4"
                alt="screenshot"
              />
            </div>
            <p>
              Even if you change the inner content, difftastic can still show
              you the additional wrapper.
            </p>
          </div>
        </div>

        <div class="card px-2 pt-2">
          <div class="card-body">
            <h2>
              <span class="green">Real</span>
              Line Numbers
            </h2>

            <div class="img-wrapper mb-4">
              <img
                src="home_img/line_numbers.png"
                class="mb-4"
                alt="screenshot"
              />
            </div>
            <p>
              Do you know how to read
              <code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual
              line numbers from your files, both before and after.
            </p>
          </div>
        </div>
      </div>

      <div class="card px-2 py-2 mt-5">
        <div class="card-body">
          <h2>60 Second <span class="green">Demo</span></h2>

          <div id="demo"></div>
        </div>
      </div>

      <!-- https://devicon.dev/ provides SVG logos. -->
      <div class="card-set">
        <div class="card px-2 pt-2 mt-5">
          <div class="card-body">
            <h2>Programming Languages</h2>

            <div
              class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
            >
              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/cplusplus.svg"
                  type="image/svg+xml"
                ></object>

                <h3 class="fw-bold mb-0 fs-4">
                  C++
                </h3>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/csharp.svg"
                  type="image/svg+xml"
                ></object>
                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    C#
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/clojure.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Clojure
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/dart.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Dart
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/erlang.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Erlang
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/go.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Go
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/haskell.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Haskell
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/java.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Java
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/javascript.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    JavaScript
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/kotlin.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Kotlin
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/lisp.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Lisp
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/lua.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Lua
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/ocaml.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    OCaml
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/php.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    PHP
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/python.svg"
                  type="image/svg+xml"
                ></object>
                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Python
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/r.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    R
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/ruby.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Ruby
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/rust.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Rust
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/scala.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    Scala
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/typescript.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    TypeScript
                  </h3>
                </div>
              </div>

              <!-- end languages -->
            </div>

            <p>
              And more! See the full
              <a
                href="https://difftastic.wilfred.me.uk/languages_supported.html"
                >list of supported languages</a
              >
              in the manual.
            </p>
          </div>
        </div>

        <div class="card px-2 pt-2">
          <div class="card-body">
            <h2>File Formats</h2>

            <div
              class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
            >
              <div class="col d-flex align-items-start">
                <!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/braces.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    HCL
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/html5.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    HTML
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/json.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    JSON
                  </h3>
                </div>
              </div>

              <div class="col d-flex align-items-start">
                <object
                  class="me-3"
                  width="45px"
                  height="45px"
                  data="home_img/yaml.svg"
                  type="image/svg+xml"
                ></object>

                <div>
                  <h3 class="fw-bold mb-0 fs-4">
                    YAML
                  </h3>
                </div>
              </div>
              <!-- end formats -->
            </div>

            <p>
              And even more! See the full
              <a
                href="https://difftastic.wilfred.me.uk/languages_supported.html#structured-text-formats"
                >list of supported file formats</a
              >
              in the manual.
            </p>
          </div>
        </div>
      </div>

      <div class="card px-2 pt-2 mt-5">
        <div class="card-body">
          <h2>Works With <span class="green">Git</span></h2>
          <div class="img-wrapper mb-4">
            <img src="home_img/git_difftool.png" alt="screenshot" />
          </div>
          <p>
            See the
            <a href="https://difftastic.wilfred.me.uk/git.html"
              >git configuration</a
            >
            instructions in the manual.
          </p>
        </div>
      </div>

      <div class="card px-2 pt-2 mt-5">
        <div class="card-body">
          <h2>Fully <span class="green">Open Source</span></h2>
          <p>
            Difftastic is
            <a href="https://github.com/Wilfred/difftastic/blob/master/LICENSE"
              >MIT licensed</a
            >. Download it, modify it, share it with your friends!
          </p>
        </div>
      </div>

      <p class="px-4 mt-5">
        <em
          >Made with Emacs and coffee by
          <a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em
        >
      </p>
    </div>

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky"
    />

    <script src="home_static/asciinema-player.min.js"></script>
    <script>
      AsciinemaPlayer.create(
        "home_static/demo.cast",
        document.getElementById("demo"),
        {
          theme: "tango",
          cols: 133,
          rows: 24,
        }
      );
    </script>
  </body>
</html>
